import React, { useState, useEffect, useContext } from 'react';
import { Button, Input, message, Modal } from 'antd';
import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons';
import { PicTitleDescStatusArr, UpdateStatus } from '@/types';
import { styled } from 'styled-components';
import { observer } from 'mobx-react-lite';
import { StatusContext } from '@/views/MaterialsView/context';

interface PicOptionEditorProps {
  configKey: string;
  id: string;
  status: PicTitleDescStatusArr;
  currentStatus: number;
  isShow: boolean;
  editCom: React.FC<any>; // 假设editCom是一个React组件类型
}
const Container = styled.div`
  .title {
    color: var(--font-color-light);
    font-size: var(--font-size-base);
  }
  .delete {
    transform: scale(0.8);
  }
`;
const PicOptionEditor: React.FC<PicOptionEditorProps> = observer(({ configKey, id, status }) => {
  const { updateStatus } = useContext(StatusContext);

  const addOptionHandle = () => {
    updateStatus(configKey);
  };

  const rmOptionHandle = (index: number) => {
    updateStatus(configKey, index);
  };

  const inputHandle = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
    index: number,
    type: 'picTitle' | 'picDesc'
  ) => {
    updateStatus(configKey, { value: e.target.value, index, key: type });
  };

  const deletePic = (index: number) => {
    Modal.confirm({
      title: '警告',
      content: '是否确认删除已上传的图片？',
      okText: '确认',
      cancelText: '取消',
      type: 'warning',
      onOk: () => {
        // 确认删除
        updateStatus(configKey, {
          value: '',
          index
        });
      },
      onCancel: () => {
        // 取消删除
        message.info('已取消删除');
      }
    });
  };

  return (
    <Container key={id}>
      <div className="flex items-center">
        <div className="m-r-2">图片单选</div>
        <Button size="small" icon={<PlusOutlined />} shape="circle" onClick={addOptionHandle} />
      </div>
      {status.map((item, index) => (
        <div key={index} className="m-b-2">
          {/* 选项 */}
          <div className="title my-2 flex items-center">
            <span>选项{index + 1}</span>
            <Button
              type="danger"
              className="ml-1 delete"
              size="small"
              icon={<MinusCircleOutlined />}
              shape="circle"
              onClick={() => rmOptionHandle(index)}
            />
          </div>
          {/* 是否上传图片 */}
          <div className="mb-2">
            {item.value ? (
              <div className="flex">
                <span className="title mr-5">已上传图片</span>
                <a onClick={() => deletePic(index)}>删除图片</a>
              </div>
            ) : (
              <span className="title">未上传图片</span>
            )}
          </div>
          {/* 修改图片标题 */}
          <Input
            value={item.picTitle}
            placeholder="图片标题"
            className="mb-2"
            onChange={e => inputHandle(e, index, 'picTitle')}
          />
          {/* 修改图片描述 */}
          <Input.TextArea
            value={item.picDesc}
            placeholder="图片描述"
            className="mb-2"
            rows={3}
            onChange={e => inputHandle(e, index, 'picDesc')}
          />
        </div>
      ))}
    </Container>
  );
});

export default PicOptionEditor;
